<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/offline" >
<head>
    <meta charset="utf-8"/>
    <title>Register</title>
</head>
<script>
    function refresh_kaptcha(){
        var path = "/kaptcha?p=" + Math.random();
        $("#kaptcha").attr("src", path);
    }
</script>
<script src="refresh_kaptcha.js"></script>
<body>
<main layout:fragment="content">
    <article class="container" style="padding-top: 0%; padding-left: 15%; padding-right: 15%">
        <header class="row">
            <div class="col s12">
                <h5 class="center">注册</h5>
            </div>
        </header>
        <section>
            <form th:action="@{/register}" method="post">
                <div class="row">
                    <div class="col s12 ">
                        <label> 用户名:
                            <input type="text" name="username" th:value="${username!=null?username:''}" maxlength="10" data-length="10" placeholder="请输入用户名" required="required"/>
                        </label>
                        <label> 密码:
                            <input type="password" name="password" minlength="6" maxlength="10" data-length="10" placeholder="请输入密码" required="required"/>
                        </label>
                        <label> 简介:
                            <input type="text" name="introduction" maxlength="16" data-length="16" placeholder="[可选]"/>
                        </label>
                        <label> 昵称:
                            <input type="text" name="nickname" th:value="${nickname}!=null?${nickname}:''" minlength="3" maxlength="10" data-length="10" placeholder="请输入您的昵称" required="required"/>
                        </label>
                        <p>
                            <input value="0" name="gender" class="with-gap" type="radio" id="male" required="required"/>
                            <label for="male"> 男</label>
                            <input value="1" name="gender" class="with-gap" type="radio" id="female" required="required"/>
                            <label for="female"> 女</label>
                        </p>
                        <label> 电话号码:
                        <input type="text" name="phoneNumber"  maxlength="20" data-length="20" placeholder="请输入电话号码" required="required"/>
                        </label>
                        <label> 验证码:
                            <input type="text" name="kaptcha"  maxlength="10" data-length="10" placeholder="请输入图形验证码" required="required"/>
                        </label>
                        <div class="invalid-feedback" th:text="${codeMsg}">
                            验证码不正确!
                        </div>
                        <div class="col-sm-4">
                            <img th:src="@{/kaptcha}" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/>
                            <a href=" " class="font-size-12 align-bottom">刷新验证码</a>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col s12 center">
                            <span><button class="btn waves-effect waves-light btn-large" type="submit" name="register">注册</button>
                                <p class="center">如果注册成功，将自动跳转至登录页面</p >
                                <p class="center">否则将不会跳转</p >
                            </span>
                    </div>
                </div>
            </form>
        </section>
    </article>
</main>

</body>

</html>